<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div id="app-7">
		  <ol>
		    <!--
		      现在我们为每个 todo-item 提供 todo 对象
		      todo 对象是变量，即其内容可以是动态的。
		      我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。
		    -->
		    <vegetable-item
		      v-for="item in orderList"
		      v-bind:order="item"
		      v-bind:key="item.id">
		    </vegetable-item>
		  </ol>
		  <ol>
		  	<fruit-item
		    	v-for="item in orderList"
		    	v-bind:order="item"
		    	v-bind:key="item.id">
		    </fruit-item>
		  </ol>
		</div>
		<style>
			.vegetable{
				color: greenyellow;
			}
			.fruit{
				color: palevioletred;
			}
		</style>
		<script>
			Vue.component('vegetable-item', {
			  props: ['order'],
			  template: '<li>{{ order.vegetable }}</li>'
			})
			
			Vue.component('fruit-item',{
				props:['order'],
				template:'<li>{{ order.fruits }}</li>'
			})
			
			
			
			var app7 = new Vue({
			  el: '#app-7',
			  data: {
			    orderList: [
			      { id: 0, vegetable: '青椒', fruits: '枣'},
			      { id: 1, vegetable: '萝卜', fruits: '苹果'},
			      { id: 2, vegetable: '番茄', fruits: '橙子'}
			    ]
			  }
			})
		</script>
	</body>
</html>
